import React, {Component} from 'react'
import Logo from '../../component/logo/logo.js'
import {List, InputItem, WingBlank, WhiteSpace,Button} from 'antd-mobile'
import { login } from '../../redux/user.redux'
import { connect } from 'react-redux'
import { Redirect } from 'react-router-dom'
import  imoocFrom  from '../../component/imooc-from/imooc-from'

@connect(
  state=>state.user,
  {login}
)
@imoocFrom
class Login extends Component{
  constructor(props){
    super(props);

    this.register = this.register.bind(this)
    this.handleLogin = this.handleLogin.bind(this)
  }
  register(){
    this.props.history.push('/register')
  }
  handleLogin(){
    this.props.login(this.props.state)
  }
  render(){
    return (
      <div>
        {this.props.redirectTo&&this.props.redirectTo!='/login'?<Redirect to={this.props.redirectTo} />:null}
        <Logo />
        <WingBlank>
          <List>
            {this.props.msg?<p className='error-msg'>{this.props.msg}</p>:null} 
            <InputItem onChange={(v)=>this.props.handleChage('user',v)}>用户</InputItem>
            <WhiteSpace />
            <InputItem type='password' onChange={(v)=>this.props.handleChage('pwd',v)}>密码</InputItem>
          </List>
          <WhiteSpace />
          <Button type='primary' onClick={this.handleLogin}>登录</Button>
          <WhiteSpace />
          <Button onClick ={this.register} type='primary'>注册</Button>
        </WingBlank>
      </div>
    )
  }
}

export default Login